<template>
  <div id="app">
    <div id="bk">
      <h1>物流管理系统</h1>
    </div>
    <div class="forms">
      <h2>管理员登陆</h2>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input v-model="ruleForm.pass" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="yanma">
          <el-input v-model="ruleForm.yanma" placeholder="验证码" style="width:50%"></el-input>
          <div @click="yanma" v-html="imgUrl" style="display:inline-block"></div>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="submitForm" style="width:100%">登录</el-button>
      </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        imgUrl:'',
        ruleForm: {
          name: '',
          pass: '',
          yanma: '',
          
        },

        rules: {
          name: [
            { required: true, message: '账号不能为空', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          yanma: [
            {  required: true,  message: '验证码不能为空', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      async getList(){
        // 直接在url里面拼接：query传参
        let result =await this.$axios.get('/userList?type=1&group=2',{
          params:{id:100}
        })
        // console.log(result);
        // .then(res=>{
        //   if(res.status == 200){
        //     let userList = res.data;
        //     console.log(userList instanceof Array);
        //   }
        // })
      },
      async submitForm() {
        console.log(this.ruleForm.name);
        await this.$axios.post('http://localhost:3000/login',
              {username:this.ruleForm.name, userpwd:this.ruleForm.pass, yanma:this.ruleForm.yanma})
        .then(res=>{
          alert("登录成功");
          // console.log(res);
          localStorage.setItem('token',res.token)
          this.$router.push('/localpage')
        })
        .catch(error=>{
          alert("登陆失败");
        })
      },
      async yanma(){
        await this.$axios.get('http://localhost:3000/yanma').then(res=>{
            // console.log(res.data)
            this.imgUrl = res.data;
            // console.log(this.imgUrl);
          })
      }
    },
    mounted(){
      this.yanma();
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#bk{
  float:left;
  background-image: url('../../public/bk.jpg');
  background-repeat: no-repeat;
  background-size: 140%;
  width:800px;
  height:500px;
}
img{
  width:800px;
}
.forms{
  float:left;
  width:400px;
  padding-top: 20px;
}
h2{
  text-align: center;
}
</style>
